<template>
  <div>
    <hade />
    <div class="blogbox">
      <!-- <div class="nav">
        <a-menu mode="vertical" @click="handleClick">
          <a-menu-item key="1">
            <a-icon type="mail" />
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="calendar" />
            Navigation Two
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title"
              ><a-icon type="appstore" /><span>Navigation Three</span></span
            >
            <a-menu-item key="3"> Option 3 </a-menu-item>
            <a-menu-item key="4"> Option 4 </a-menu-item>
            <a-sub-menu key="sub1-2" title="Submenu">
              <a-menu-item key="5"> Option 5 </a-menu-item>
              <a-menu-item key="6"> Option 6 </a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"
              ><a-icon type="setting" /><span>Navigation Four</span></span
            >
            <a-menu-item key="7"> Option 7 </a-menu-item>
            <a-menu-item key="8"> Option 8 </a-menu-item>
            <a-menu-item key="9"> Option 9 </a-menu-item>
            <a-menu-item key="10"> Option 10 </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div> -->
      <div class="content">
        <a-affix :offset-top="47" style="z-index: 99">
          <h1 style="background: #fff">
            {{ blogDatali.title }}
          </h1>
        </a-affix>

        <no-ssr>
          <mavon-editor
            v-highlight
            style="box-shadow: rgb(0 0 0 / 10%) -1px -1px 0px 0px; z-index: -1"
            :value="blogDatali.txt"
            :subfield="false"
            :default-open="'preview'"
            :toolbars-flag="false"
            :editable="false"
            :scroll-style="true"
            :toolbars="markdownOption"
          ></mavon-editor>
        </no-ssr>

        <a-list
          class="comment-list"
          :header="`${blogdiscuss.length} replies`"
          item-layout="horizontal"
          :data-source="blogdiscuss"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <a-comment :author="item.author" :avatar="item.avatar">
              <!-- <p slot="content"> </p> -->
              <div v-html="item.txt"></div>

              <!-- <a-tooltip
                slot="datetime"
                title="item.datetime.format('YYYY-MM-DD HH:mm:ss')"
              >
                <span>************---------************</span>
              </a-tooltip> -->
            </a-comment>
          </a-list-item>
        </a-list>
        <discuss />
      </div>
    </div>
  </div>
</template>


<script>
import { blogDetail, getblogdiscuss } from '../../api/api'
// import md from '../../README.md'
export default {
  async asyncData(req) {
    const id = parseInt(req.query.id)
    const datali = await blogDetail({ id })
    const a = await getblogdiscuss({ id })
    console.log(id, datali)
    return { blogDatali: datali, blogdiscuss: a }
  },
  data() {
    return {
      blogdiscuss: [],
      dataList: [
        {
          author: 'Han Solo',
          avatar:
            'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
          datetime: 'Han',
        },
        {
          author: 'Han Solo',
          avatar:
            'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
          datetime: 'Han',
        },
        {
          author: 'Han Solo',
          avatar:
            'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
          datetime: 'Han',
        },
      ],
      blogDatali: {
        title: '',
        txt: '',
      },
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    }
  },
  mounted() {},
  methods: {
    handleClick(e) {
      console.log('click ', e)
    },
    // 上传图片方法
    $imgAdd(pos, $file) {
      console.log(pos, $file)
    },
  },
}
</script>

<style lang="less" scoped>
.blogbox {
  width: 100%;
  display: flex;
  overflow: hidden;
  height: calc(100vh - 47px);
  .nav {
    width: 15%;
    position: fixed;
    top: 47px;
  }
  .content {
    width: 80%;
    position: absolute;
    z-index: -1;
    right: 5%;
  }
}

.markdown-body .lang- {
  display: block;
  overflow: auto;
  padding: 1.3em 2em !important;
  font-size: 16px !important;
  background: #272822 !important;
  color: #fff;
  max-height: 700px;
}

.markdown-body .hljs {
  display: block;
  overflow: auto;
  padding: 1.3em 2em !important;
  font-size: 16px !important;
  background: #272822 !important;
  color: #fff;
  max-height: 700px;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2 !important;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2 !important;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff !important;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e !important;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672 !important;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef !important;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2 !important;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74 !important;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e !important;
}
</style>